<template>
  <div>
    <Header></Header>
    <Banner></Banner>
    <div class="main">
      <div class="main-left">
        <li class="active" @click="$router.push('/wz')">
          <i class="iconfont icon-all-wenzhang"></i>
          我的文章
        </li>
        <li @click="$router.push('/sc')">
          <i class="iconfont icon-all-xiangqu"></i>
          我的收藏
        </li>
        <li @click="$router.push('/wd')">
          <i class="iconfont icon-all-wendabangzhu"></i>
          我的问答
        </li>
        <li @click="$router.push('/pl')">
          <i class="iconfont icon-all-pinglun"></i>
          我的评论
        </li>
        <li @click="$router.push('/dy')">
          <i class="iconfont icon-all-yonghuming"></i>
          我的订阅
        </li>
        <li @click="$router.push('/ds')">
          <i class="iconfont icon-all-qian"></i>
          我的打赏
        </li>
        <li @click="$router.push('/tz')">
          <i class="iconfont icon-all-tongzhi"></i>
          通知中心
        </li>
        <li @click="$router.push('/ll')">
          <i class="iconfont icon-all-liulan"></i>
          浏览记录
        </li>
        <li @click="$router.push('/sz')">
          <i class="iconfont icon-all-icon_setting"></i>
          资料设置
        </li>
      </div>
      <div class="main-right">
        <div class="nav">
          <span @click="wz" v-bind:class="{ active1: isActive1}">全部文章（1）</span>
          <span @click="fb" v-bind:class="{ active2: isActive2}">已发布 (0)</span>
          <span @click="cg" v-bind:class="{ active3: isActive3}">草稿箱（{{draftCount}}）</span>
          <span @click="sh" v-bind:class="{ active4: isActive4}">待审核（1）</span>
          <div @click="$router.push('/editor')">+发布文章</div>
        </div>
        <div class="content" v-if="all">
          <p>提示：工作日审稿会在24小时内完成，请耐心等候。如果稿件被删，证明是广告贴</p>
          <li>
            <span style="color:red;">【待审核】</span>
            讨教大学上课如何获取资源?
            <span style="margin-left:200px;">
              <i class="iconfont icon-all-eye"></i>
              3
              <i class="iconfont icon-all-tubiao-"></i>
              2018/12/19
              <i
                class="iconfont icon-all-combinedshapecopy2"
                style="color:red; padding-left:20px;"
              ></i>
            </span>
          </li>
        </div>
        <div class="content" v-if="relase">
          <p>提示：工作日审稿会在24小时内完成，请耐心等候。如果稿件被删，证明是广告贴</p>
          <div
            v-if="no"
            style="text-align: center; font-size:16px;padding-top:10px; border-bottom:1px solid #666"
          >您还没有任何文章</div>
          <li v-if="yes">
            <span style="color:red;">【待审核】</span>
            讨教大学上课如何获取资源?
            <span style="margin-left:200px;">
              <i class="iconfont icon-all-eye"></i>
              3
              <i class="iconfont icon-all-tubiao-"></i>
              2018/12/19
              <i
                class="iconfont icon-all-combinedshapecopy2"
                style="color:red; padding-left:20px;"
              ></i>
            </span>
          </li>
        </div>

        <div class="content" v-if="draft">
          <!-- <p>提示：工作日审稿会在24小时内完成，请耐心等候。如果稿件被删，证明是广告贴</p> -->
          <div
            v-if="this.draftList.length ==0"
            style="text-align: center; font-size:16px;padding-top:10px; border-bottom:1px solid #666"
          >您还没有任何草稿</div>
          <!-- <div v-for="(item,index) in this.draftList" :key="index"> -->
            <li v-if="this.draftList.length > 0">
              讨教大学上课如何获取资源?
              <span style="margin-left:300px;">
                <i class="iconfont icon-all-tubiao-"></i>
                2018/12/19
                <i
                  class="iconfont icon-all-combinedshapecopy2"
                  style="color:red; padding-left:20px;"
                ></i>
              </span>
            </li>
          <!-- </div> -->
        </div>
        <div class="content" v-if="shenhe">
          <p>提示：工作日审稿会在24小时内完成，请耐心等候。如果稿件被删，证明是广告贴</p>
          <li>
            <span style="color:red;">【待审核】</span>
            讨教大学上课如何获取资源?
            <span style="margin-left:200px;">
              <i class="iconfont icon-all-eye"></i>
              3
              <i class="iconfont icon-all-tubiao-"></i>
              2018/12/19
              <i
                class="iconfont icon-all-combinedshapecopy2"
                style="color:red; padding-left:20px;"
              ></i>
            </span>
          </li>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/common/Header/Header";
import Banner from "@/common/Banner/Banner";
export default {
  name: "wz",
  data() {
    return {
      isActive1: true,
      isActive2: false,
      isActive3: false,
      isActive4: false,
      all: true,
      relase: false,
      draft: false,
      shenhe: false,
      no: false,
      yes: false,
      draftList: [],
      draftCount: ""
    };
  },
  methods: {
    wz() {
      this.all = true;
      this.relase = false;
      this.draft = false;
      this.shenhe = false;
      this.isActive1 = true;
      this.isActive2 = false;
      this.isActive3 = false;
      this.isActive4 = false;
    },
    fb() {
      this.all = false;

      this.relase = true;
      this.no = true;
      this.draft = false;
      this.shenhe = false;
      this.isActive1 = false;
      this.isActive2 = true;
      this.isActive3 = false;
      this.isActive4 = false;
    },
    cg() {
      console.log(111);
      this.all = false;
      this.relase = false;
      this.draft = true;
      this.shenhe = false;
      this.isActive1 = false;
      this.isActive2 = false;
      this.isActive3 = true;
      this.isActive4 = false;
    },
    sh() {
      this.all = false;
      this.relase = false;
      this.draft = false;
      this.shenhe = true;
      this.isActive1 = false;
      this.isActive2 = false;
      this.isActive3 = false;
      this.isActive4 = true;
    },
    //获取草稿箱内容
    getdraft() {
      this.$axios
        .get(
          "/api/App/User/Set/user_newstest?member_id=" +
            this.getCookie("member_id"),
          {}
        )
        .then(res => {
          this.draftList = res.data.data.list;
          this.draftCount = res.data.data.count;
          console.log(this.draftList);
        });
    }
  },
  mounted() {
    this.getdraft();
  },
  components: {
    Header,
    Banner
  }
};
</script>
<style lang="scss" scoped>
.main {
  width: 60%;
  height: auto;
  margin: 0 auto;
  //  background: red;
  margin-top: 30px;
  margin-bottom: 30px;
  //  margin-bottom:-20px;
  display: flex;
  justify-content: space-between;
  .main-left {
    width: 230px;
    background-color: #fff;
    li {
      padding: 20px;
      list-style: none;
      border-left: 1px solid transparent;
      font-size: 18px;
      cursor: pointer;
    }
    .active {
      background-color: #f2f5fb;
      border-left: 1px solid #5079b7;
      color: #5079b7;
    }
  }
  .main-right {
    text-align: left;
    width: 900px;
    background-color: #fff;
    padding: 20px;
    margin-left: 30px;
    .nav {
      line-height: 1.8;
      border-bottom: 1px solid #5079b7;
      span {
        padding-bottom: 8px;
        display: inline-block;
        margin-right: 10px;
        cursor: pointer;
      }
      .active1 {
        border-bottom: 1px solid #5079b7;
        color: #5079b7;
      }
      .active2 {
        border-bottom: 1px solid #5079b7;
        color: #5079b7;
      }
      .active3 {
        border-bottom: 1px solid #5079b7;
        color: #5079b7;
      }
      .active4 {
        border-bottom: 1px solid #5079b7;
        color: #5079b7;
      }
      div {
        // float: right;
        color: #5079b7;
        margin-left: 210px;
        cursor: pointer;
      }
    }
    .content {
      p {
        font-size: 12px;
        color: red;
        padding-top: 12px;
      }
      li {
        list-style: none;
        border-bottom: 1px solid #666;
        padding-bottom: 12px;
      }
    }
  }
}
</style>


